---
import ShepherdWink from '../images/shepherd-head-wink.svg';
---

<footer class="flex justify-center mt-auto w-full">
  <img
    class="footer-logo absolute w-48"
    src={ShepherdWink.src}
    alt="Shepherd Winking"
    role="presentation"
  />

  <div
    class="bg-grey border-4 border-navy flex flex-wrap items-center justify-center md:justify-between max-w-8xl p-8 pt-20 w-full md:pt-8"
  >
    <div
      class="flex items-center justify-center w-full md:justify-between md:w-auto"
    >
      <img
        class="inline mr-2 w-8"
        src="/img/ship-shape-logo.svg"
        alt="Ship Shape Logo"
      />

      <span class="font-heading text-xl uppercase">
        Library by
        <a class="underline hover:text-navy-light" href="https://shipshape.io"
          >Ship Shape</a
        >
      </span>
    </div>

    <div class="flex items-center">
      <a href="https://github.com/shepherd-pro">
        <img
          class="footer-icon mr-4 w-6"
          src="/img/github.svg"
          alt="GitHub Logo"
        />
      </a>

      <!-- <a href="https://twitter.com/whiskeywebfm">
        <img
          class="footer-icon mr-4 w-6"
          src="/img/twitter.svg"
          alt="Twitter Logo"
        />
      </a>

      <a href="https://www.linkedin.com/company/ship-shape/">
        <img
          class="footer-icon mr-4 w-6"
          src="/img/linkedin.svg"
          alt="LinkedIn Logo"
        />
      </a> -->
    </div>
  </div>
</footer>
<script
  src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.2.10/webcomponents-bundle.js"
></script>
